<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 单行超长显示省略号 */
        .div1 {
            border: 1px solid red;
            width: 500px;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 2 行超长显示省略号 */
        .div2 {
            border: 1px solid blue;
            width: 500px;
            margin-top: 50px;

            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="div1">
    这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
</div>

<div class="div2">
    这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
</div>
</body>
</html>